<template>
    <div class="echarts-page">
        <klTab v-model="page" :options="pageList" @change="handleClick" />

        <keep-alive>
            <component class="m-t-10" :is="page" @change="change"></component>
        </keep-alive>
    </div>
</template>
<script>

import note_page from './note_page.vue'
import klTab from '@/mixins/components/kl-tab/index.vue'
export default {
    components: {
        note_page,
        klTab
    },
    data() {
        return {
            pageList: [
                {
                    value: 'note_page',
                    label: '纪要可视化',
                },
            ],
            page: 'note_page',
            monitorList: [],
            total: 0,
        }
    },
    mounted() {
        
    },
    methods: {
        change(row) {
            this.page = row.page
        },
        handleClick(val) {
            this.page = val
        },
        initMonitor() {
            adminApi.get_monitor_list_echarts().then((res) => {
                
                this.monitorList = res.data.list
                this.total = res.data.count
            })
        },

        initNotes() {
            var myChart = echarts.init(document.getElementById('main111'))
            var dataArr = 44
            var colorSet = {
                color: '#468EFD',
            }
            const option = {
                backgroundColor: '#fff',
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%',
                },

                series: [
                    {
                        name: '内部进度条',
                        type: 'gauge',
                        // center: ['20%', '50%'],
                        radius: '80%',

                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [dataArr / 100, colorSet.color],
                                    [1, '#111F42'],
                                ],
                                width: 8,
                            },
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        itemStyle: {
                            show: false,
                        },
                        detail: {
                            formatter: function (value) {
                                if (value !== 0) {
                                    var num = Math.round(value)
                                    return parseInt(num).toFixed(0) + '%'
                                } else {
                                    return 0
                                }
                            },
                            offsetCenter: [0, 82],
                            textStyle: {
                                padding: [0, 0, 0, 0],
                                fontSize: 18,
                                fontWeight: '700',
                                color: colorSet.color,
                            },
                        },
                        title: {
                            //标题
                            show: true,
                            offsetCenter: [0, 46], // x, y，单位px
                            textStyle: {
                                color: '#fff',
                                fontSize: 14, //表盘上的标题文字大小
                                fontWeight: 400,
                                fontFamily: 'PingFangSC',
                            },
                        },
                        data: [
                            {
                                name: 'title',
                                value: dataArr,
                            },
                        ],
                        pointer: {
                            show: true,
                            length: '75%',
                            radius: '20%',
                            width: 10, //指针粗细
                        },
                        animationDuration: 4000,
                    },
                    {
                        name: '外部刻度',
                        type: 'gauge',
                        //  center: ['20%', '50%'],
                        radius: '50%',
                        min: 0, //最小刻度
                        max: 100, //最大刻度
                        splitNumber: 10, //刻度数量
                        startAngle: 225,
                        endAngle: -45,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: [[1, 'rgba(0,0,0,0)']],
                            },
                        }, //仪表盘轴线
                        axisLabel: {
                            show: true,
                            color: '#4d5bd1',
                            distance: 25,
                            formatter: function (v) {
                                switch (v + '') {
                                    case '0':
                                        return '0'
                                    case '10':
                                        return '10'
                                    case '20':
                                        return '20'
                                    case '30':
                                        return '30'
                                    case '40':
                                        return '40'
                                    case '50':
                                        return '50'
                                    case '60':
                                        return '60'
                                    case '70':
                                        return '70'
                                    case '80':
                                        return '80'
                                    case '90':
                                        return '90'
                                    case '100':
                                        return '100'
                                }
                            },
                        }, //刻度标签。
                        axisTick: {
                            show: true,
                            splitNumber: 7,
                            lineStyle: {
                                color: colorSet.color, //用颜色渐变函数不起作用
                                width: 1,
                            },
                            length: -8,
                        }, //刻度样式
                        splitLine: {
                            show: true,
                            length: -20,
                            lineStyle: {
                                color: colorSet.color, //用颜色渐变函数不起作用
                            },
                        }, //分隔线样式
                        detail: {
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },
                    },
                ],
            }

            myChart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>
.echarts {
    width: 300px;
    height: 300px;
}
.echarts-page {
    height: 100vh;
    overflow-y: auto;
}
</style>
